<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>任务四---百度前端技术学院</title>
	<style>
	 	*{
            margin: 0;
            padding: 0;
            height: 100%;
        }
		.container{
			width:400px;
			height:200px;
			margin:0 auto;
			background:#ccc;
			position:relative;
			top:50%;
			margin-top:-100px;
			overflow:hidden;
		}
		.circle01{
			width:50px;
			height:50px;
			background:#fc0;
			border-radius:0 0 50px 0;
			/* 
				或者
				width:100px;
				height:100px;
				border-radius:100px;
				right:-50px;
				bottom:-50px;
			 */
			position:absolute;
		}
		.circle02{
			width:50px;
			height:50px;
			background:#fc0;
			border-radius:50px 0 0 0;
			position:absolute;
			right:0;
			bottom:0;
		}
		@media (max-width: 400px) {
            .container{
                width:100%;
            }
        }
	</style>
</head>
<body>
	<div class="container">
			<div class="circle01"></div>
			<div class="circle02"></div>
	</div>
</body>
</html>